<!DOCTYPE html>
<html>
<head>
<title>合同列表</title>
#parse("sys/header.html")
<style>
.clear {
	clear: both;
}
.layui-btn {height: 34px; line-height: 34px;}
.label-group p {
    width: 200px;
    background: #ccc;
    line-height: 33px;
    padding: 4px 15px 0px;
}
.label-group {
    border-bottom: 1px solid #ccc;
    margin: 10px 10px 15px 10px;
}
.layui-btn {height: 34px; line-height: 34px; border: 1px solid #009688;}
.layui-btn-xs {height: 22px; line-height: 22px; padding: 0 5px; font-size: 12px;}
.layui-btn-sm {height: 22px; line-height: 22px; padding: 0 10px; font-size: 12px;}
.layui-btn.layui-btn-warm {
	border: 1px solid #FFB800;
}
.apply-bar {
    font-size: 24px;
    line-height: 40px;
    padding: 15px 20px;
    background: #ccc;
    height: 70px;
}
.apply-bar span {
	margin-right: 20px;
}
.active.layui-btn {
	color: #009688;
	background: #fff;
}
.pdf-view {
	color: #337ab7;
    text-decoration: underline;
    cursor: pointer;
}
.buttons {
	text-align: center;
}
</style>
</head>
<body>
<div id="rrapp" v-cloak>

	<div v-show="showList">
		<div class="grid-btn">
	        <button type="button"
	        	class="layui-btn"
	        	:class="{active:contractStatus==0}"
	        	@click="filterStatus(0)">
	        	<i class="layui-icon">&#xe615;</i>待签约</button>
	        <button type="button"
	        	class="layui-btn"
	        	:class="{active:contractStatus==1}"
	        	@click="filterStatus(1)">
	        	<i class="layui-icon">&#xe615;</i>生效中</button>
	        <button type="button"
	        	class="layui-btn"
	        	:class="{active:contractStatus==2}"
	        	@click="filterStatus(2)">
	        	<i class="layui-icon">&#xe615;</i>已作废</button>
		</div>
		<div class="grid-btn">
			<div class="form-group col-md-2" v-show="contractStatus!=0">
				<input class="form-control" v-model="q.netSignCode" placeholder="网签编码">
			</div>
			<div class="form-group col-md-2">
				<input class="form-control" v-model="q.houseCode" placeholder="房源编码">
			</div>			
			<div class="form-group col-md-2">
				<input class="form-control" v-model="q.landlordPhone" placeholder="房东手机号">
			</div>			
			<div class="form-group col-md-2">
				<input class="form-control" v-model="q.tenantPhone" placeholder="租客手机号">
			</div>			
	        <button type="button" class="layui-btn" @click="query"><i class="layui-icon">&#xe615;</i>查询</button>
		</div>

	    <table id="jqGrid"></table>
	    <div id="jqGridPager"></div>

    </div>
    
    <div v-show="!showList" class="panel panel-default">
		<div class="panel-heading">详情</div>
		<div class="apply-bar">
			<span>状态：{{detail.contractStatus}}</span>
			<span>网签编码：{{detail.netSignCode}}</span>
		</div>

		<div class="label-group col-md-12"><p>承租人基础信息</p></div>
		<div class="form-group col-md-6">
		   	<div class="col-sm-2 control-label">租客姓名</div>
		   	<div class="col-sm-10">
		      <input type="text" class="form-control" v-model="contractInfo.tenantName"/>
		    </div>
		</div>
		<div class="form-group col-md-6">
		   	<div class="col-sm-2 control-label">联系方式</div>
		   	<div class="col-sm-10">
		      <input type="text" class="form-control" v-model="contractInfo.tenantPhone"/>
		    </div>
		</div>
		<div class="form-group col-md-6">
		   	<div class="col-sm-2 control-label">身份证号</div>
		   	<div class="col-sm-10">
		      <input type="text" class="form-control" v-model="contractInfo.tenantIdCard"/>
		    </div>
		</div>

		<div class="label-group col-md-12"><p>租赁合同信息</p></div>
		<div class="form-group col-md-6">
		   	<div class="col-sm-2 control-label">租赁时间</div>
		   	<div class="col-sm-10">
		      <input type="text" class="form-control" v-model="contractInfo.fmt_contractTime"/>
		    </div>
		</div>
		<div class="form-group col-md-6">
		   	<div class="col-sm-2 control-label">租期</div>
		   	<div class="col-sm-10">
		      <input type="text" class="form-control" v-model="contractInfo.totalMonth"/>
		    </div>
		</div>
		<div class="form-group col-md-6">
		   	<div class="col-sm-2 control-label">租金价格</div>
		   	<div class="col-sm-10">
		      <input type="text" class="form-control" v-model="contractInfo.monthRent"/>
		    </div>
		</div>
		<div class="form-group col-md-6">
		   	<div class="col-sm-2 control-label">付款方式</div>
		   	<div class="col-sm-10">
		      <input type="text" class="form-control" v-model="contractInfo.payWay"/>
		    </div>
		</div>
		<div class="form-group col-md-6">
		   	<div class="col-sm-2 control-label">租赁地址</div>
		   	<div class="col-sm-10">
		      <input type="text" class="form-control" v-model="contractInfo.leaseAddress"/>
		    </div>
		</div>
		<div class="form-group col-md-6">
		   	<div class="col-sm-2 control-label">房源编码</div>
		   	<div class="col-sm-10">
		      <input type="text" class="form-control" v-model="contractInfo.houseCode"/>
		    </div>
		</div>
		<div class="form-group col-md-6">
		   	<div class="col-sm-2 control-label">交租日期</div>
		   	<div class="col-sm-10">
		      <input type="text" class="form-control" v-model="contractInfo.payRentDate"/>
		    </div>
		</div>
		<div class="form-group col-md-6">
		   	<div class="col-sm-2 control-label">押金</div>
		   	<div class="col-sm-10">
		      <input type="text" class="form-control" v-model="contractInfo.deposit"/>
		    </div>
		</div>
		<div class="form-group col-md-6">
		   	<div class="col-sm-2 control-label">合同详情</div>
		   	<div class="col-sm-10">
		      <a @click="pdfview" class="pdf-view">查看合同PDF</a>
		    </div>
		</div>

		<div class="label-group col-md-12"><p>出租方信息</p></div>
		<div class="form-group col-md-6">
		   	<div class="col-sm-2 control-label">出租人</div>
		   	<div class="col-sm-10">
		      <input type="text" class="form-control" v-model="contractInfo.landlordName"/>
		    </div>
		</div>
		<div class="form-group col-md-6">
		   	<div class="col-sm-2 control-label">联系方式</div>
		   	<div class="col-sm-10">
		      <input type="text" class="form-control" v-model="contractInfo.landlordPhone"/>
		    </div>
		</div>
		<div class="form-group col-md-6">
		   	<div class="col-sm-2 control-label">身份证号</div>
		   	<div class="col-sm-10">
		      <input type="text" class="form-control" v-model="contractInfo.landlordIdCard"/>
		    </div>
		</div>

		<div class="form-group clear buttons">
            <button class="layui-btn layui-btn-warm" type="button" @click="reload" style="margin-left: 30px">返回</button>
		</div>
	</div>
</div>

<script src="${rc.contextPath}/statics/js/sys/contractinfo.js?_${date.systemTime}"></script>
</body>
</html>